<template>
  <div>
    <!--顶部common组件-->
    <commontop></commontop>

    <div class="middle">
      <!--中间导航栏-->
      <div>
        <el-menu  mode="horizontal" class="bottom" router
                 background-color="#D5637E" text-color="#fff" active-text-color="#fff">
          <el-menu-item index="/index" class="item">后台首页</el-menu-item>
          <el-menu-item index="/order" class="item">订单管理</el-menu-item>
          <el-menu-item index="/flower" class="item">商品管理</el-menu-item>
          <el-menu-item index="/account" class="item">用户管理</el-menu-item>
          <el-menu-item index="/comment" class="item">评价管理</el-menu-item>
          <el-menu-item index="/self" class="item">个人设置</el-menu-item>
        </el-menu>
      </div>
      <div>
        <router-view/>
      </div>
      
      
    </div>
    <!--底部common组件-->
    <div v-show="isBottom">
      <commobottom></commobottom>
    </div>
    

  </div>
</template>

<script>
import CommonTopView from "@/views/CommonTopView.vue";
import CommonBottomView from "@/views/CommonBottomView.vue";



export default {
  name: "MainView",
  components: {
    "commontop": CommonTopView,
    "commobottom": CommonBottomView,
  },

  data(){
    return {
     
      //初始时不在页面最下面，会显示底部组件
      isBottom:false,
    }
  },

  mounted() {
    // 添加滚动事件监听器
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    // 移除滚动事件监听器
    window.removeEventListener('scroll', this.handleScroll);
  },

  methods: {
    //移动到页面最下面让底部消失
    handleScroll() {
      // 获取滚动条的当前位置
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      // 获取文档的总高度
      const docHeight = document.documentElement.scrollHeight;
      // 获取视口的高度
      const windowHeight = window.innerHeight;

      // 判断是否滑动到底部
      if (scrollTop + windowHeight >= docHeight) {
        this.isBottom = true;
      } else {
        this.isBottom = false;
      }
    },
  }
  
  
}
</script>

<style scoped lang="less">
.middle {
  position: absolute;
  top: 137px;
  width: 100%;
  background-color: #f5f3f3;
  padding-bottom: 260px;
}

.bottom .item {
  margin-left: 50px;
}


</style>